<template>
	<view class="body">
		<view class="formdata">
			<view class="formdata-item">
				<view class="text">
					<text>学生名字</text>
				</view>
				<view class="input">
					<input placeholder="请输入学生名字"  @input="OnStudnetsName" />
				</view>
			</view>
			<view class="formdata-item">
				<view class="text">
					<text>班级名称</text>
				</view>
				<view class="input">
					<input placeholder="请输入班级名称"   @input="OnClassName" />
				</view>
			</view>
		</view>
		<view class="table">
			<radio-group @change="onSelectStatus">
			  <view class="flex">
					<view class="title">审核状态</view>
			    <view class="radio">
			      <label class="text-sm">未审核</label>
			      <radio
			          :class="['radio','blue',curSelectStatus === '0' ? 'checked' : '']"
			          :checked="curSelectStatus === '0'"
			          value="0"
			          style="transform: scale(0.8)"
			      >
			      </radio>
			
			      <label class="text-sm">已通过</label>
			      <radio
			          :class="['radio','blue',curSelectStatus === '1' ? 'checked' : '']"
			          :checked="curSelectStatus === '1'"
			          value="1"
			          style="transform: scale(0.8)"
			      >
			      </radio>
						
						<label class="text-sm">不通过</label>
						<radio
						    :class="['radio','blue',curSelectStatus === '2' ? 'checked' : '']"
						    :checked="curSelectStatus === '2'"
						    value="2"
						    style="transform: scale(0.8)"
						>
						</radio>
			    </view>
			  </view>
			</radio-group>
			
			<view class="bg-white padding-sm">
			  <view class="grid margin-bottom text-center text-sm text-bold col-4">
			    <view class="table-title-bg padding flex-sub">缴费单ID</view>
			    <view class="table-title-bg padding flex-twice">学号</view>
			    <view class="table-title-bg padding flex-twice">学员名称</view>
			    <view class="table-title-bg padding flex-sub">状态</view>
			  </view>
			
			  <view class="table-item grid margin-bottom text-center col-4 text-sm" v-for="item in RefundList" :key="item.JFD_ID"  @tap="handleTo(item.JFD_ID,item.SFJE)">
			    <view class="padding flex-sub">{{item.JFD_ID}}</view>
			    <view class="padding flex-twice text-blue" style="text-decoration: underline">{{item.STUDENTNO}}</view>
			    <view class="padding flex-twice" >{{item.STUDENTNAME}}</view>
			    <view class="padding state" v-if="item.SH_FLAG ==='0'"><text>{{item.SH_FLAGNR}}</text></view>
					<view class="padding state"  v-if="item.SH_FLAG === '1'"><text style="background-color: #39B54A;color: white">{{item.SH_FLAGNR}}</text></view>
					<view class="padding state" v-if="item.SH_FLAG === '2'"><text style="background-color: red;color: white;">{{item.SH_FLAGNR}}</text></view>
			  </view>
			<view class="cu-form-group" v-if="PageTotal>1">
			  <view class="title" @tap="firstPage()"><text class="check-info-btn">首页</text></view>
			  <view class="title" @tap="lastPage()"><text class="check-info-btn">上一页</text></view>
			  <view class="title">{{Pages}}/{{PageTotal}}</view>
			  <view class="title" @tap="nextPage()"><text class="check-info-btn">下一页</text></view>
			  <view class="title" @tap="endPage()"><text class="check-info-btn">尾页</text></view>
			</view>
			  <view v-if="!RefundList.length" class="text-sm text-center">-- 暂无数据 --</view>
			</view>
			
		</view>
	</view>
</template>

<script lang="ts" setup>
import {onShow} from "@dcloudio/uni-app";
import {onMounted,reactive,ref} from "vue"
import { RefundAuditList } from "../../api/refundaudit"
import {useRefundAuditList} from "./useTkSH"
const {initRefundAuditList}:any  = useRefundAuditList()
	let curSelectStatus = ref<"0" | "1" | "2">("0")
	let StudentName = ref<any>("")
	let ClassName = ref<any>("")
	let Pages = ref<any>("1")
	function onSelectStatus(e:any){
		curSelectStatus.value = e.detail.value
		Pages.value = 1
		initRefundAuditList({
			SH_FLAG: e.detail.value,
			StudentName:StudentName.value,
			ClassName : ClassName.value,
			Page : Pages.value,
		})
		.then(res=>{
			RefundList.value = res.DAT
			total.value = res.COUNT[0].NUM
			PageTotalSum()
		})
	}
	function firstPage(){
		Pages.value = "1"
		initRefundAuditList({
			SH_FLAG: curSelectStatus.value,
			StudentName:StudentName.value,
			ClassName : ClassName.value,
			Page : 1,
		})
		.then(res=>{
			RefundList.value = res.DAT
		})
	}
	function endPage(){
		Pages.value = PageTotal.value
		initRefundAuditList({
			SH_FLAG: curSelectStatus.value,
			StudentName:StudentName.value,
			ClassName : ClassName.value,
			Page : PageTotal.value
		})
		.then(res=>{
			RefundList.value = res.DAT
		})
	}
	function lastPage(){
		if(Pages.value >1){
			Pages.value--
			initRefundAuditList({
				SH_FLAG: curSelectStatus.value,
				StudentName:StudentName.value,
				ClassName : ClassName.value,
				Page : Pages.value
			})
			.then(res=>{
				RefundList.value = res.DAT
			})
		}
	}
	function nextPage(){
		if(Pages.value < PageTotal.value){
			Pages.value++
			initRefundAuditList({
				SH_FLAG: curSelectStatus.value,
				StudentName:StudentName.value,
				ClassName : ClassName.value,
				Page : Pages.value
			})
			.then(res=>{
				RefundList.value = res.DAT
			})
		}
	}
	function handleTo(JFD_ID,SFJE){
		uni.navigateTo({
			url: `/pages/manage/TkshDetail?JFD_ID=${JFD_ID}&&SFJE=${SFJE}`
		})
	}
	function	OnStudnetsName(e:any){
		StudentName.value = e.detail.value
	 initRefundAuditList({
		 StudentName:e.detail.value,
		 Page : 1,
		 SH_FLAG: curSelectStatus.value
		})
	 .then(res=>{
			RefundList.value = res.DAT
			total.value = res.COUNT[0].NUM
			PageTotalSum()
		})
 }
	function OnClassName(e:any){
		ClassName.value = e.detail.value
		initRefundAuditList({
			ClassName:e.detail.value,
			Page : 1,
			SH_FLAG: curSelectStatus.value
		})
		.then(res=>{
				RefundList.value = res.DAT
				total.value = res.COUNT[0].NUM
				PageTotalSum()
		})
	}
	let RefundList = ref<any>([])
	let total = ref<any>("")
	let pageSize = 10
	let PageTotal = ref<any>("")
	function PageTotalSum(){
		PageTotal.value = parseInt(String(total.value / pageSize)) + (total.value % pageSize === 0 ? 0 : 1)
	}
	onShow(()=>{
		initRefundAuditList({
			SH_FLAG: curSelectStatus.value,
			StudentName:StudentName.value,
			ClassName : ClassName.value,
			Page : Pages.value
		})
		.then(res=>{
			RefundList.value = res.DAT,
			total.value = res.COUNT[0].NUM
			PageTotalSum()
		})
	})
</script>

<style lang="scss">
	.body{
		width: 100%;
		height: 100%;
		background-color: white;
	}
	.formdata{
		.formdata-item{
			padding: 0 32rpx 0 32rpx;
			border-bottom: 4rpx #F7F8FC solid;
			width: 100%;
			height: 110rpx;
			display: flex;
			align-items: center;
			.text{
				margin-right:32rpx ;
			}
		}
	}
	.flex{
		padding: 0 32rpx 0 32rpx;
		width: 750rpx;
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.table-title-bg{
		background-color: #dddd;
	}
	.state{
		text{
			background-color: #dbdcdf;
			color: white;
			padding:5rpx;
			font-size:20rpx
		}
	}
</style>